<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="600" height="400">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')

      class Heart {
         constructor(x, y) {
            this.x = x
            this.y = y
            this.color = "red"
            c1.onmousemove = (e) => {
               let x = e.offsetX
               let y = e.offsetY
               let isIn = ctx.isPointInPath(this.heartPath, x, y)
               console.log(isIn)
               if (isIn) {
                  this.color = "pink"
               } else {
                  this.color = "red"
               }
            }
         }
         draw() {
            this.heartPath = new Path2D()
            // 起点
            this.heartPath.moveTo(this.x, this.y)
            // 两个控制点，一个终点
            this.heartPath.bezierCurveTo(this.x + 100, this.y - 100, this.x + 200, this.y, this.x, this.y + 200)
            this.heartPath.bezierCurveTo(this.x - 200, this.y, this.x - 100, this.y - 100, this.x, this.y)
            ctx.save()
            ctx.fillStyle = this.color
            ctx.fill(this.heartPath)
            ctx.restore()
         }
      }
      let heart = new Heart(200, 200)
      function render() {
         ctx.clearRect(0, 0, c1.width, c1.height)
         heart.draw()
         requestAnimationFrame(render)
      }
      render()

   </script>
</body>

</html>